import './index.css'
import { Button, Flex,Input } from 'antd';
import React,{useState} from 'react';
import { SearchOutlined, GoogleOutlined } from '@ant-design/icons';

let Characters = ({ onAddTextInput, onAddTitle,subtitle,Maintext }) => { 

    return (
        <div>
               <Input prefix={<SearchOutlined />} style={{ width: '90%', height: '40px', margin: '20px' }} placeholder="搜索文字组合" />
                <Button onClick={onAddTextInput} style={{ width: '95%', height: '40px', marginLeft: '10px', background: '#7830e6', border: 'none', color: '#fff' }} >添加文本框</Button>
                <div style={{width:'100%',height:'496px',overflowX:'hidden',
                  overflowY: 'scroll'
                }}>
                  <div style={{color:'#fff'}}>
                    <GoogleOutlined />
                    <span>品牌工具箱</span>
                    <span style={{float:'right'}}>编辑</span>
                  </div>
                  <Button style={{width:'95%',height:'40px',margin:'10px 10px 15px 10px'}} ghost>设置你的品牌字体</Button>
                  <b style={{color:'#fff',width:'100%'}}>默认文字样式</b>
                  <Button style={{width:'95%',height:'60px',margin:'10px 10px 5px 10px',fontSize:'22px',fontWeight: 'bold'}} ghost   onClick={onAddTitle}>添加标题</Button>
                  <Button onClick={subtitle} style={{width:'95%',height:'40px',margin:'10px 10px 5px 10px',fontSize:'17px',fontWeight: 'bold'}} ghost>添加副标题</Button>
                  <Button onClick={Maintext} style={{ width: '95%', margin: '10px 10px 5px 10px', fontSize: '14px', fontWeight: 'bold' }} ghost>添加一小段正文文字</Button>
                   <div style={{width:'100%',height:'120px',marginTop:'15px'}} >
                      <b style={{color:'#fff',width:'100%',height:'20px',float:'left'}}>字体组合</b>
            <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px', float: 'left', margin: '10px' }}>
<img scr='https://template.canva.cn/EAFol-Kps-c/1/0/364w-yE-CWaOOKQQ.png' />
            </div>
                    <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px', margin: '10px', float: 'left' }}></div>
                     <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px',float:'left',margin:'10px' }}></div>
                    <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px', margin: '10px', float: 'left' }}></div>
                     <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px',float:'left',margin:'10px' }}></div>
                    <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px', margin: '10px', float: 'left' }}></div>
                     <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px',float:'left',margin:'10px' }}></div>
                    <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px', margin: '10px', float: 'left' }}></div>
                     <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px',float:'left',margin:'10px' }}></div>
                    <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px', margin: '10px', float: 'left' }}></div>
                     <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px',float:'left',margin:'10px' }}></div>
                    <div style={{ width: '163px', height: '160px', background: '#E5E5E5', borderRadius: '15px', margin: '10px', float: 'left' }}></div>
                  </div>
                  
                </div>
        </div>
)
}

export default Characters